import Sortable from 'sortablejs';
export default {
	data() {
		return {
			listWidth: 0,
			deleteIndex: 1,
			sortableSource: null,
			sortableHandle: null,
			sortableDelete: null
		}
	},
	mounted() {
		this.initSortable();
	},
	beforeDestroy() {
		if (this.sortableSource) {
			this.sortableSource.destroy();
		}
		if (this.sortableHandle) {
			this.sortableHandle.destroy();
		}
		if (this.sortableDelete) {
			this.sortableDelete.destroy();
		}
	},
	methods: {
		//初始化拖拽
		initSortable() {
			let that = this;
			let clipSource = that.$refs['clipSource'];
			let clipHandle = that.$refs['clipHandle'];
			let clipDelete = that.$refs['clipDelete'];
			that.sortableSource = new Sortable(clipSource, {
				group: { name: 'source', pull: 'clone', put: false },
				animation: 150,
				sort: false
			});
			that.sortableDelete = new Sortable(clipDelete, {
				group: { put: ['handle'] },
				animation: 150,
				onAdd(evt) {
					evt.item.parentNode.removeChild(evt.item);
				}
			});
			that.sortableHandle = new Sortable(clipHandle, {
				group: { name: 'handle', put: ['source'] },
				animation: 150,
				selectedClass: 'selected',
				onAdd(evt) {
					//console.log(evt);
					let allItems = clipHandle.querySelectorAll('.video_item');
					that.updateSelectedStatus(evt, allItems);
				},
				onRemove(evt) {
					let allItems = clipHandle.querySelectorAll('.video_item');
				},
				onStart(evt) {
					that.deleteIndex = 9;
				},
				onEnd(evt) {
					that.deleteIndex = 1;
				},
				onMove(evt) {
					//console.log(evt);
					/* let allItems = clipHandle.querySelectorAll('.video_item');
					that.updateHandleWidth(evt.item, allItems); */
				},
				onSort(evt) {
					console.log(evt);
				},
				onChange(evt) {
					let itemRect = evt.item.getBoundingClientRect();
					let itemStyle = window.getComputedStyle(evt.item);
					let allItems = clipHandle.querySelectorAll('.video_item');
					let itemWidth = itemRect.width + parseInt(itemStyle.marginLeft, 10);
					that.listWidth = itemWidth * allItems.length + 10 + 'px';
				},
				onChoose(evt) {
					let allItems = clipHandle.querySelectorAll('.video_item');
					that.updateSelectedStatus(evt, allItems);
				}
			});
		},

		//修改选中状态
		updateSelectedStatus(evt, list) {
			list.forEach(item => {
				item.classList.remove('selected')
			})
			evt.item.classList.add('selected');
		}
	}
}